<template>
    <div class="container" @click="handleGallaryClick">

       <div class="wrapper">
    <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="(item, index) in imgs"
                  :key="index" >
        <img class="gallary-img" :src="item">
    </swiper-slide>


 
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
       </div>

    </div>
</template>
<script>
    export default {
       name: 'CommonGallary',
       props: {
         imgs: {
            type: Array,
            default () {
                return []
            }
         }
       },
       data () {
        return {
            swiperOption: {
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                // DOM发送变化时，轮播自动刷新一次
                observeParents: true,
                observer: true
            }
        }
       },
       methods: {
        handleGallaryClick () {
            this.$emit('close')
        }
       }
    }
</script>
<style scoped>
    .container >>> .swiper-container {
        overflow: inherit;
    }

    .container {
        display: flex;
        /*灵活的项目将垂直显示，正如一个列一样。*/
        flex-direction: column;
        /*项目位于容器的中心*/
        justify-content: center;
        z-index: 99;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
    }

    .wrapper {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        margin-top: 2rem;

    }
    
    .gallary-img {
        width: 100%;
    }
    
    .swiper-pagination {
        color: #fff;
        bottom: -0.8rem;
        z-index: 100;
    }

</style>